<template>
  <div id="app">
    <h1>你好</h1>
    <!-- 通过父组件给子组件绑定一个自定义事件实现，子给父传递数据，第一种写法，使用@或v-on-->

       <!-- <Student @test1.once="getStudentName"  @test2="h1"/> -->
       <span>学生名称:{{studentName}}</span>

       <!--@click.native="show" 表示click为原生的点击事件而不是自定义事件  -->
       <Student ref="student" ></Student>
       <br>

       <!--通过父组件给子组件传递函数类型的props实现：父给子传递数据-->
       <School :schoolName="schoolName" ></School>
  </div>
</template>

<script>
import Student from "./components/Student.vue"
import School from "./components/School.vue"
export default {
  name: 'App',
  data(){
    return{
  studentName:''
    }
  },
  components: {
  Student,
  School
  },
  methods:{
    show(){
    alert(13);
    },
   schoolName(name){
 console.log("App收到了学校名称"+name);
   },
    getStudentName(name,...params){
    console.log("App收到了学生的名字"+name+params);
    this.studentName=name;
    },
    h1(){
      console.log("输出自定义事件h1");
    }
  },
  mounted(){
    // setTimeout(()=>{
    //   this.$refs.student.$on('test1',this.getStudentName);
    // },3000)
    this.$refs.student.$on('test1',this.getStudentName);

    //触发一次
   // this.$refs.student.$once('test1',this.getStudentName);

  }
}
</script>

<style>

</style>
